<template>
  <div class="articleItem">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in articleList" :key="index">
          <div class="content" @click="aerticleDetail(item.art_id)">
            <div class="singleImgBox">
              <h3 class="van-multi-ellipsis--l3">{{ item.title }}</h3>
              <div v-if="item.cover.images.length === 1">
                <van-image :src="item.cover.images[0]">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </div>
            </div>
            <div class="multipleImgBox" v-if="item.cover.images.length > 1">
              <van-image
                v-for="(item2, index) in item.cover.images"
                :key="index"
                :src="item2"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
          </div>
          <div class="others">
            <strong v-if="item.is_top">置顶</strong>
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate | formatTime }}</span>
            <i class="iconfont feedback" @click="operationClick(index)"
              >&#xe605;</i
            >
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="operation" round :style="{ width: '90%' }">
      <van-cell title="不感兴趣" center icon="failure" @click="deleteArticle" />
      <van-cell
        title="反馈垃圾内容"
        icon="warn-o"
        @click="
          operation = false
          feedback = true
        "
        is-link
      />
      <van-cell title="拉黑作者" icon="delete" @click="deleteArticle" />
    </van-popup>
    <van-popup v-model="feedback" round :style="{ width: '90%' }">
      <van-cell
        icon="arrow-left"
        @click="
          feedback = false
          operation = true
        "
      ></van-cell>
      <van-cell title="其他问题" @click="deleteArticle" />
      <van-cell title="标题夸张" @click="deleteArticle" />
      <van-cell title="低俗色情" @click="deleteArticle" />
      <van-cell title="错别字多" @click="deleteArticle" />
      <van-cell title="旧闻重复" @click="deleteArticle" />
      <van-cell title="广告软文" @click="deleteArticle" />
      <van-cell title="内容不实" @click="deleteArticle" />
      <van-cell title="涉嫌违法犯罪" @click="deleteArticle" />
      <van-cell title="侵权" @click="deleteArticle" />
    </van-popup>
  </div>
</template>
<script>
import { recommendArticles } from '@/api/first.js'
import { search } from '@/api/search.js'
export default {
  name: 'ArticleItem',
  props: ['channel_id', 'articleArr'],
  data () {
    return {
      articleList: [],
      timestamp: 0,
      loading: false,
      finished: false,
      refreshing: false,
      operation: false,
      feedback: false,
      articleIndex: 0,
      page: 1
    }
  },
  watch: {
    channel_id: function (val, oldVal) {
      scrollTo(0, 0)
      this.onRefresh()
    },
    '$route.query.q': function (val, oldVal) {
      scrollTo(0, 0)
      this.onRefresh()
    }
  },
  mounted: function () {
    this.$bus.$off('articleIndex')
    var vm = this
    // 用$on事件来接收参数
    this.$bus.$on('articleIndex', index => {
      vm.articleIndex = index
    })
  },
  methods: {
    async getArticles () {
      let res
      if (this.$route.query.q) {
        res = await search({
          q: this.$route.query.q,
          page: this.page
        })
        if (this.refreshing) {
          this.articleList = res.data.results
          this.refreshing = false
        } else {
          this.page++
          this.articleList = this.articleList.concat(res.data.results)
          this.loading = false
        }
      } else {
        res = await recommendArticles({
          channel_id: this.channel_id,
          timestamp: 1556789000001 + parseInt(Math.random() * 99),
          with_top: 1
        })
        if (this.refreshing) {
          this.articleList = res.data.results
          this.refreshing = false
        } else {
          this.articleList = this.articleList.concat(res.data.results)
          this.loading = false
        }
      }
    },
    onLoad () {
      this.finished = false
      this.loading = true
      this.getArticles()
    },
    onRefresh () {
      this.refreshing = true
      this.finished = false
      this.getArticles()
    },
    operationClick (index) {
      this.operation = true
      this.$bus.$emit('articleIndex', index)
    },
    deleteArticle () {
      this.operation = false
      this.feedback = false
      this.articleList.splice(this.articleIndex, 1)
    },
    aerticleDetail (id) {
      this.$router.push(
        '/home/detail/' + id + '?redirect=' + this.$route.fullPath
      )
    }
  }
}
</script>
<style lang="less" scoped>
.articleItem {
  .van-cell {
    padding-left: 0;
    padding-right: 0;
    .content {
      margin-bottom: 10px;
      .van-image {
        width: 110px;
        height: 80px;
      }
      .singleImgBox {
        display: flex;
        h3 {
          flex: 1;
          font-family: ArialMT;
          font-size: 16px;
          padding-right: 10px;
          margin-bottom: 10px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #3a3a3a;
        }
      }
      .multipleImgBox {
        display: flex;
        justify-content: space-around;
      }
    }
    .others {
      position: relative;
      font-size: 12px;
      strong {
        color: #e22829;
        margin-right: 15px;
      }
      span {
        color: #b4b4b4;
        margin-right: 15px;
      }
      i {
        position: absolute;
        font-size: 10px;
        color: #cecece;
        right: 0;
        vertical-align: top;
      }
    }
  }
  .van-popup {
    .van-cell {
      padding: 15px;
    }
  }
}
</style>
